<template>
  <div style="background:#f5f5f5;padding-bottom:80px">
    <div class="service-box">
      <div class="service-main">
        <div class="service-head">
          <div class="sh-show">
            <img src="@/assets/images/hd_default_user_avatar.png" alt="" />
            <div>
              <h2>{{ userInfo.realse_name || userInfo.phone }}</h2>
              <p>金币：<span>0</span></p>
            </div>
          </div>
          <em>{{ userInfo.is_vip != 1 ? '普通用户' : 'VIP会员' }}</em>
        </div>
        <ul class="service-menu-list">
          <li>
            <img src="@/assets/icons/IMG_0319.jpg" alt="" />
            <h2>新手福利</h2>
          </li>
          <li>
            <img src="@/assets/icons/IMG_0320.jpg" alt="" />
            <h2>签到有奖</h2>
          </li>
          <li>
            <img src="@/assets/icons/IMG_0321.jpg" alt="" />
            <h2>无限外卖卷</h2>
          </li>
          <li>
            <img src="@/assets/icons/IMG_0322.jpg" alt="" />
            <h2>7折视频会员</h2>
          </li>
        </ul>
      </div>
    </div>
    <div class="get-vip" v-if="userInfo.is_vip != 1" @click="vipOpen">
      <img src="@/assets/icons/vip.png" alt="" />
    </div>
    <div class="class-vip">
      <div class="cv-left">
        <div>
          <h2>完成任务</h2>
          <h2>即可领取金币</h2>
        </div>
        <a href="javascript:;">查看更多</a>
      </div>
      <div class="cv-right">
        <div>
          <h2>完成绑卡</h2>
          <h2>+200</h2>
        </div>
        <div>
          <h2>浏览下款通道</h2>
          <h2>+100</h2>
        </div>
      </div>
    </div>
    <div class="ser-vip-new">
      <div class="svn-h-box">
        <div class="svn-h-box-head">
          <h2>新手限时体验权益<img src="@/assets/icons/hot.jpg" /></h2>
          <h3><s>99元</s>限时免费</h3>
        </div>
        <ul>
          <li>
            <span>每周更新</span>
            <img src="@/assets/icons/kz.png" alt="" />
            <h2>常规下款通道</h2>
          </li>
        </ul>
      </div>
      <div class="svn-c-box">
        <ul>
          <li v-for="(item, index) in userVipList" :key="index">
            <span v-if="item.tag">{{ item.tag }}</span>
            <img :src="item.url" alt="" />
            <h2>{{ item.name }}</h2>
          </li>
        </ul>
      </div>
    </div>
    <!-- 分割 -->
    <div class="ser-vip-new">
      <div class="svn-h-box">
        <div class="svn-h-box-head">
          <h2>会员<span>预计1年可省5824元</span></h2>
          <h3>会员专享</h3>
        </div>
        <ul>
          <li>
            <span>永久免费</span>
            <img src="@/assets/icons/kz.png" alt="" />
            <h2>高速下款通道</h2>
          </li>
          <li>
            <span>1000元</span>
            <img src="@/assets/icons/v2.png" alt="" />
            <h2>赠送拒就赔红包</h2>
          </li>
          <li>
            <span>24小时</span>
            <img src="@/assets/icons/v3.png" alt="" />
            <h2>专属VIP客服</h2>
          </li>
          <li>
            <span>高人一等</span>
            <img src="@/assets/icons/v4.png" alt="" />
            <h2>签到奖励翻倍</h2>
          </li>
        </ul>
      </div>
      <div class="svn-c-box">
        <ul>
          <li v-for="(item, index) in vipList" :key="index">
            <span v-if="item.tag">{{ item.tag }}</span>
            <img :src="item.url" alt="" />
            <h2>{{ item.name }}</h2>
          </li>
        </ul>
      </div>
    </div>
    <div class="vip-all">
      <h2>更多权益 敬请期待</h2>
      <p>*成为会员后新增权益可免费试用</p>
    </div>
    <van-button
      class="get-vip-btn"
      block
      type="info"
      v-if="userInfo.is_vip != 1"
      @click="vipOpen"
      color="linear-gradient(to right, #cba66b, #e8ca99)"
      >开通VIP尊享会员</van-button
    >
  </div>
</template>

<script>
import { getStore } from '@/utils/group'
import { mapState } from 'vuex'
export default {
  name: 'Service',
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  data() {
    return {
      userVipList: [
        {
          tag: '5折起',
          url: require('../../assets/icons/a.png'),
          name: '爱奇艺会员'
        },
        {
          tag: '5折起',
          url: require('../../assets/icons/b.png'),
          name: '腾讯视频会员'
        },
        {
          tag: '免费领取',
          url: require('../../assets/icons/c.png'),
          name: '顺丰同城急送'
        },
        {
          tag: '5折起',
          url: require('../../assets/icons/d.png'),
          name: '芒果TV会员'
        },
        {
          tag: '7折起',
          url: require('../../assets/icons/e.png'),
          name: '云音乐会员'
        },
        {
          tag: '',
          url: require('../../assets/icons/f.png'),
          name: '周黑鸭折扣卷'
        },
        {
          tag: '',
          url: require('../../assets/icons/g.png'),
          name: 'QQ会员'
        },
        {
          tag: '',
          url: require('../../assets/icons/aa.png'),
          name: 'LOL'
        },
        {
          tag: '',
          url: require('../../assets/icons/cf.png'),
          name: 'CF点券'
        },
        {
          tag: '',
          url: require('../../assets/icons/dnf.png'),
          name: 'DNF点券'
        },
        {
          tag: '14天VIP',
          url: require('../../assets/icons/fd.png'),
          name: '樊登读书卡'
        },
        {
          tag: '',
          url: require('../../assets/icons/jxw.png'),
          name: '酒仙网'
        },
        {
          tag: '',
          url: require('../../assets/icons/ww.png'),
          name: '旺旺'
        },
        {
          tag: '',
          url: require('../../assets/icons/hll.png'),
          name: '货拉拉'
        }
      ],
      vipList: [
        {
          tag: '9折专享',
          url: require('../../assets/icons/1.png'),
          name: '美团现金卷'
        },
        {
          tag: '会员专享',
          url: require('../../assets/icons/2.png'),
          name: '饿了么现金卷'
        },
        {
          tag: '会员专享',
          url: require('../../assets/icons/4.png'),
          name: '滴滴出行折扣卷'
        },
        {
          tag: '会员专享',
          url: require('../../assets/icons/5.png'),
          name: '曹操出行折扣卷'
        },
        {
          tag: '8折买单',
          url: require('../../assets/icons/6.png'),
          name: '线下超市付款立减'
        },
        {
          tag: '会员9折',
          url: require('../../assets/icons/7.png'),
          name: '家乐福充值卡'
        },
        {
          tag: '会员专享',
          url: require('../../assets/icons/8.png'),
          name: '喜茶特卖卷'
        },
        {
          tag: '',
          url: require('../../assets/icons/9.png'),
          name: '盒马鲜生'
        },
        {
          tag: '',
          url: require('../../assets/icons/10.png'),
          name: '王者荣耀'
        },
        {
          tag: '',
          url: require('../../assets/icons/11.png'),
          name: '腾讯体育'
        },
        {
          tag: '',
          url: require('../../assets/icons/12.png'),
          name: '虾米音乐'
        }
      ]
    }
  },
  created() {
    this.vipList.push(...this.userVipList)
  },
  methods: {
    vipOpen() {
      const { realse_name, is_bind_bank_card } = this.userInfo
      if (realse_name == '未实名' && !getStore('userRest')) {
        this.$router.push({
          path: '/process'
        })
        return
      }
      if (is_bind_bank_card == 0) {
        this.$router.push({
          path: '/process/bank'
        })
        return
      }
      this.$router.push({
        path: '/vip'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.service-box {
  padding: 20px;
  background: linear-gradient(#e5c795, #dab983, #c7a165);
  .service-main {
    background: url('../../assets/images/ic_mine_bg.png') no-repeat;
    padding: 20px 20px 26px 20px;
    background-size: 100% 100%;
    .service-head {
      display: flex;
      justify-content: space-between;
      position: relative;
      .sh-show {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin-right: 16px;
        }
        div {
          h2 {
            color: #343434;
            font-size: 19px;
            font-weight: bold;
            margin-bottom: 10px;
          }
          p {
            color: #343434;
            font-size: 14px;
            span {
              font-weight: bold;
            }
          }
        }
      }
      em {
        font-style: normal;
        display: block;
        padding: 5px;
        background: #caa56b;
        color: #fff;
        font-size: 12px;
        position: absolute;
        right: 0;
        top: 10px;
        border-radius: 8px;
      }
    }
    .service-menu-list {
      display: flex;
      justify-content: space-between;
      width: 300px;
      margin: 0 auto;
      margin-top: 16px;
      li {
        text-align: center;
        img {
          width: 30px;
          height: 30px;
        }
        h2 {
          font-size: 12px;
          color: #666;
          margin-top: 4px;
        }
      }
    }
  }
}
.get-vip {
  width: 330px;
  margin: 20px auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.class-vip {
  width: 330px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .cv-left {
    width: 120px;
    height: 120px;
    background: #f9e4e4;
    border-radius: 6px;
    div {
      margin: 20px 0 0 10px;
      h2 {
        font-size: 16px;
        color: #c77873;
        font-weight: bold;
        margin-bottom: 6px;
      }
    }
    a {
      display: block;
      padding: 4px;
      font-size: 12px;
      color: #fff;
      border-radius: 4px;
      background: #bb5c57;
      float: left;
      margin: 20px 0 0 10px;
    }
  }
  .cv-right {
    width: 4.4rem;
    div {
      overflow: hidden;
      height: 56px;
      border-radius: 6px;
      h2 {
        margin: 10px 0 0 10px;
        font-size: 16px;

        font-weight: bold;
        margin-bottom: 6px;
        &:nth-last-of-type(1) {
          margin-top: 0;
        }
      }
      &:nth-of-type(1) {
        background: #f4e8df;
        margin-bottom: 20px;
        h2 {
          color: #b87542;
        }
      }
      &:nth-of-type(2) {
        background: #f8f6e4;
        h2 {
          color: #c5a865;
        }
      }
    }
  }
}
.ser-vip-new {
  width: 330px;
  margin: 20px auto;
  .svn-h-box {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    .svn-h-box-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h2 {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        padding-left: 8px;
        span {
          font-size: 12px;
          margin-left: 10px;
        }
        &::before {
          display: inline-block;
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(0, -50%);
          width: 4px;
          background: #cca86d;
          height: 14px;
        }
        img {
          width: 15px;
          height: 18px;
          position: absolute;
          top: -3px;
          right: -18px;
        }
      }
      h3 {
        font-size: 14px;
        color: #fb2e4f;
        s {
          font-size: 14px;
          color: #999;
          margin-right: 10px;
        }
      }
    }
    ul {
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      li {
        width: 25%;
        text-align: center;
        position: relative;
        span {
          position: absolute;
          top: -8px;
          font-size: 10px;
          color: #fff;
          background: #000000;
          padding: 4px;
          border-radius: 10px;
        }
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        h2 {
          font-size: 13px;
          color: #3d3d3d;
          font-weight: bold;
        }
      }
    }
  }
  .svn-c-box {
    background: #fff;
    padding-top: 20px;
    border-radius: 6px;
    margin-top: 6px;
    ul {
      margin: 20px 0;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      li {
        width: 25%;
        text-align: center;
        position: relative;
        margin-bottom: 20px;
        span {
          position: absolute;
          top: -8px;
          font-size: 10px;
          color: #fff;
          background: #ff5f5f;
          padding: 4px;
          border-radius: 10px;
          right: 10px;
        }
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        h2 {
          width: 90%;
          margin: 0 auto;
          margin-top: 4px;
          text-align: center;
          font-size: 13px;
          color: #676767;
          font-weight: bold;
        }
      }
    }
  }
}
.vip-all {
  text-align: center;
  padding-bottom: 60px;
  h2,
  p {
    font-size: 12px;
    color: #666;
  }
  p {
    margin-top: 10px;
  }
}
.get-vip-btn {
  position: fixed;
  bottom: 60px;
  left: 0;
  width: 100%;
  height: 50px;
}
</style>
